<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="description" content="This is my page">
<script src="js/go-debug.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/debug.js" type="text/javascript"></script>
<script src="js/base64.js" type="text/javascript"></script>
<script src="js/canvas2image.js" type="text/javascript"></script>



<!-- kendo -->
<script src="js/kendo_js/kendo.web.min.js" type="text/javascript"></script>
<script src="js/kendo_js/kendo.window.min.js" type="text/javascript"></script>
<script src="js/kendo_js/kendo.grid.min.js" type="text/javascript"></script>

<link href="style/kendo_style/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="style/kendo_style/kendo.default.min.css" rel="stylesheet" type="text/css" />

<!-- kendo -->
<script src="js/easyui_js/jquery.easyui.min.js" type="text/javascript"></script>
<script src="js/easyui_js/jquery.layout.js" type="text/javascript"></script>
<script src="js/easyui_js/jquery.panel.js" type="text/javascript"></script>
<link href="style/easyui/default/easyui.css" rel="stylesheet" type="text/css" />

<!-- user -->
<script src="js/jquery.easydrag.handler.beta2.js" type="text/javascript"></script>
<link href="style/style.css" rel="stylesheet" type="text/css" />

<script src="js/fun.js" type="text/javascript"></script>
<script type="text/javascript">
var myDiagram = null;

function init() {
   var $ = go.GraphObject.make;  // for conciseness in defining templates
    myDiagram = new go.Diagram("myDiagram");

    myDiagram.nodeTemplate =
      $(go.Node, go.Panel.Vertical,
        { toSpot: go.Spot.TopSide,
          fromSpot: go.Spot.BottomSide },
        $(go.Picture,
         "/mxvis/images/red-cross-50x50.png",
          //"/home/wangfei/transparent-2x2.png",0x50.png
	  { desiredSize: new go.Size(50, 50) }),
        $(go.TextBlock,
          new go.Binding("text", "key", function(k) { return "node-" + k; })),
        $("TreeExpanderButton"),
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify));

    myDiagram.linkTemplate =
      $(go.Link, go.Link.AvoidsNodes, go.Link.JumpOver,
        { corner: 10,
          relinkableFrom: true, relinkableTo: true },
        $(go.Shape,
          { stroke: "red", strokeWidth: 2 }),
        $(go.Shape,
          { toArrow: "Standard" }),
        $(go.TextBlock, go.Link.OrientUpright,
          { margin: 5,
            segmentOffset: new go.Point(0, -10) },
          new go.Binding("text", "lab", function(l) { return "label-" + l; })));

    myDiagram.model =
      $(go.GraphLinksModel,
        { nodeDataArray: [
            { key: 0, loc: "0 0" },
            { key: 1, loc: "200 0" },
            { key: 2, loc: "100 120" },
            { key: 3, loc: "0 240" },
            { key: 4, loc: "200 240" }
          ],
          linkDataArray: [
            { from: 0, to: 2, lab: "0" },
            { from: 1, to: 2, lab: "1" },
            { from: 2, to: 3, lab: "3" },
            { from: 2, to: 4, lab: "4" }
          ]
        });

}

var imageData = null;
function save2image() {
	imageData = myDiagram.makeImageData();
	document.getElementById("image").src = imageData;
}


</script>
</head>
<body onload="init()">
  <p>Minimal Sample</p>
  <div id="myDiagram" style="border: solid 1px black; width:400px; height:400px"></div>
  <button onclick="save2image()">makeImageData_and_display</button><br/>
  <image id="image" src=""/>

</body>
</html>
